//@ts-nocheck
import { Tooltip } from "antd";
import React, { useEffect, useRef, useState } from "react";
import "./index.less";

interface IProps {
  /* 点的标题列表，例如：['吸睛程度', '投入程度', '品牌关联度'] */
  labels: Array<string>;
  /* 主标题，例如：信息传递指数(%) */
  mainLabel?: string;
  /* 数据列表，例如：[{label: '蛋白生牛乳棒', value: 60, points: [1,2,3,4]}] */
  data: Array<{ label: string; value: number; points: Array<number> }>;
  type?: string;
}

const BubbleChart: React.FC<IProps> = ({
  data,
  labels,
  mainLabel,
  type = "text",
}) => {
  const wrapperRef = useRef(null);
  const [xAxis, setXAxis] = useState([]);
  const [maxValue, setMaxValue] = useState(0);
  const [dataList, setDataList] = useState([]);

  const largestOfFour = (arr) => {
    let newArray = arr.join(",").split(",");
    return Math.max.apply({}, newArray);
  };

  useEffect(() => {
    let _dataList = [];
    data.forEach((dataItem, dataIndex) => {
      _dataList.push(dataItem.points);
    });
    let maxValue = largestOfFour(_dataList);
    setMaxValue(maxValue);
    setXAxis(labels);
    setDataList(_dataList);
  }, [data]);

  const [itemWidth, setItemWidth] = useState<number>(0);

  useEffect(() => {
    setItemWidth((wrapperRef.current.getBoundingClientRect().width - 276) / 7);
  }, []);

  const pointerStyle = (value, maxValue): { width: string; height: string } => {
    let percent = (value * 24) / maxValue;
    return {
      width: `${percent}px`,
      height: `${percent}px`,
    };
  };

  return (
    <div className="bubble-chart" ref={wrapperRef}>
      <div
        className="buddle-content"
        style={{ marginLeft: type === "card" ? 366 : null }}
      >
        <div className="table">
          {dataList.map((row, rowIndex) => {
            return (
              <div
                className="tr"
                key={rowIndex}
                // style={{ marginBottom: rowIndex === data.length - 1 ? 32 : 54 }}
              >
                {type === "card" && (
                  <div className="title">
                    <span className="name">{data[rowIndex].label}</span>
                    <span>{data[rowIndex].value}</span>
                  </div>
                )}
                {type === "text" && (
                  <div className="text">
                    <span className="name">{data[rowIndex].label}</span>
                  </div>
                )}
                {row.map((column, columnIndex) => {
                  return (
                    <div
                      className="td"
                      key={columnIndex}
                      style={{
                        width: columnIndex === row.length - 1 ? 0 : itemWidth,
                      }}
                    >
                      {rowIndex !== 0 && <div className="top-line" />}
                      {columnIndex !== row.length - 1 && (
                        <div className="right-line" />
                      )}
                      <div className="dot">
                        <Tooltip
                          overlayClassName="bubble-chart-tooltip"
                          placement="top"
                          title={column}
                          arrowPointAtCenter
                          color="#ffffff"
                          getPopupContainer={(triggerNode) => {
                            return triggerNode;
                          }}
                        >
                          <div
                            className="dot-solid"
                            style={pointerStyle(column, maxValue)}
                          />
                        </Tooltip>
                      </div>
                    </div>
                  );
                })}
              </div>
            );
          })}
          <div className="tr" style={{ paddingLeft: type === "text" ? 88 : 0 }}>
            <div className="main-label">{mainLabel}</div>
            {xAxis?.map((item, index) => {
              return (
                <div
                  className="td"
                  key={index}
                  style={{
                    marginRight: index === xAxis.length - 1 ? 0 : itemWidth,
                  }}
                >
                  <span className="xaxis-name">{item}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};
export default BubbleChart;
